<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单和图片</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body style="margin: 50px;">
		<!--
			class="form-control"
			<form class="form-inline"> 内敛表单，让所有表单元素在一行显示宽度小于768px时
		-->
		
		<form>
			
			<div class="form-group has-success has-feedback">
				<label class="control-label">电子邮件</label>
				<input type="email" class="form-control" placeholder="请输入您的电子邮件"/>
				<span class="glyphicon glyphicon-ok form-control-feedback "></span>
			</div>
			<div class="form-group">
				<label>密码</label>
				<input type="password" class="form-control input-lg" placeholder="请输入您的密码" />
			</div>
			
			<div class="input-group">
				<div class="input-group-addon">￥</div>
				<input type="text" class="form-control" placeholder="请输入价格" />
				<div class="input-group-addon">.00</div>
			</div>
			
		</form>
		
		<form class="form-horizontal">
			
			<div class="form-group ">
				<label class="col-sm-2 control-label">电子邮件</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" placeholder="请输入您的电子邮件"/>
				</div>
				
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" placeholder="请输入您的密码" />
				</div>
				
			</div>
			
			<div class="input-group">
				<div class="input-group-addon">￥</div>
				<input type="text" class="form-control" placeholder="请输入价格" />
				<div class="input-group-addon">.00</div>
			</div>
			
			<div class="checkbox disabled">
				<label><input type="checkbox" disabled />电影</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox" />电视剧</label>
			</div>
			
			<label class="checkbox-inline disabled"><input type="checkbox" disabled/>电影</label>
			<label class="checkbox-inline"><input type="checkbox" />电视剧</label>
			<label class="radio-inline"><input type="radio" />男</label>
			
			<select class="form-control">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
			</select>
		</form>
		
		<!--
			class="img-rounded" 圆角6px
			class="img-circle"  圆形
			class="img-thumbnail" 缩略图加了边框
			class="img-responsive" 图片支持响应式 
		-->
		<img src="images/b.jpg" class="img-rounded"/>
		<img src="images/b.jpg" class="img-circle"/>
		<img src="images/b.jpg" class="img-thumbnail img-responsive"/>
		
		<script src="jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>
	
</html>
